<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8" />
    <title>HTML5开发_京西软件技术有限公司</title>
    <meta name="keywords" content="HTML5,核心,h5页面制作,前端" />
    <meta name="description" content="课程大纲 基本功 HTML+CSS JavaScript基础 JS基本特效 JavaScript高级特性 jQuery基本使用 HTML进阶 JavaScript基础教程 常见特效，例如：tab，导航，整页滚动 正则表达式 选择器 CSS进阶 JavaScript内置" />
    <script type=text/javascript src="/skin/js/jquery-1.8.0.min.js"></script>
    <script type=text/javascript src="/skin/js/jquery.jslides.js"></script>
    <link rel="stylesheet" type="text/css" href="/skin/css/style.css">
    <style type="text/css">
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    
    td,
    th {
        padding: 0;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr,
    img {
        page-break-inside: avoid;
    }
    
    .table {
        border-collapse: collapse !important;
    }
    
    .table td,
    .table th {
        background-color: #fff !important;
    }
    
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #ddd !important;
    }
    
    table {
        background-color: transparent;
    }
    
    caption {
        padding-top: 8px;
        padding-bottom: 8px;
        color: #777;
        text-align: left;
    }
    
    th {
        text-align: left;
    }
    
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }
    
    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }
    
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }
    
    .table > tbody + tbody {
        border-top: 2px solid #ddd;
    }
    
    .table .table {
        background-color: #fff;
    }
    
    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > th,
    .table-condensed > tfoot > tr > th,
    .table-condensed > thead > tr > td,
    .table-condensed > tbody > tr > td,
    .table-condensed > tfoot > tr > td {
        padding: 5px;
    }
    
    .table-bordered {
        border: 1px solid #ddd;
    }
    
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #ddd;
    }
    
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }
    
    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f9f9f9;
    }
    
    .table-hover > tbody > tr:hover {
        background-color: #f5f5f5;
    }
    
    table col[class*="col-"] {
        position: static;
        display: table-column;
        float: none;
    }
    
    table td[class*="col-"],
    table th[class*="col-"] {
        position: static;
        display: table-cell;
        float: none;
    }
    
    .table > thead > tr > td.active,
    .table > tbody > tr > td.active,
    .table > tfoot > tr > td.active,
    .table > thead > tr > th.active,
    .table > tbody > tr > th.active,
    .table > tfoot > tr > th.active,
    .table > thead > tr.active > td,
    .table > tbody > tr.active > td,
    .table > tfoot > tr.active > td,
    .table > thead > tr.active > th,
    .table > tbody > tr.active > th,
    .table > tfoot > tr.active > th {
        background-color: #f5f5f5;
    }
    
    .table-hover > tbody > tr > td.active:hover,
    .table-hover > tbody > tr > th.active:hover,
    .table-hover > tbody > tr.active:hover > td,
    .table-hover > tbody > tr:hover > .active,
    .table-hover > tbody > tr.active:hover > th {
        background-color: #e8e8e8;
    }
    
    .table > thead > tr > td.success,
    .table > tbody > tr > td.success,
    .table > tfoot > tr > td.success,
    .table > thead > tr > th.success,
    .table > tbody > tr > th.success,
    .table > tfoot > tr > th.success,
    .table > thead > tr.success > td,
    .table > tbody > tr.success > td,
    .table > tfoot > tr.success > td,
    .table > thead > tr.success > th,
    .table > tbody > tr.success > th,
    .table > tfoot > tr.success > th {
        background-color: #dff0d8;
    }
    
    .table-hover > tbody > tr > td.success:hover,
    .table-hover > tbody > tr > th.success:hover,
    .table-hover > tbody > tr.success:hover > td,
    .table-hover > tbody > tr:hover > .success,
    .table-hover > tbody > tr.success:hover > th {
        background-color: #d0e9c6;
    }
    
    .table > thead > tr > td.info,
    .table > tbody > tr > td.info,
    .table > tfoot > tr > td.info,
    .table > thead > tr > th.info,
    .table > tbody > tr > th.info,
    .table > tfoot > tr > th.info,
    .table > thead > tr.info > td,
    .table > tbody > tr.info > td,
    .table > tfoot > tr.info > td,
    .table > thead > tr.info > th,
    .table > tbody > tr.info > th,
    .table > tfoot > tr.info > th {
        background-color: #d9edf7;
    }
    
    .table-hover > tbody > tr > td.info:hover,
    .table-hover > tbody > tr > th.info:hover,
    .table-hover > tbody > tr.info:hover > td,
    .table-hover > tbody > tr:hover > .info,
    .table-hover > tbody > tr.info:hover > th {
        background-color: #c4e3f3;
    }
    
    .table > thead > tr > td.warning,
    .table > tbody > tr > td.warning,
    .table > tfoot > tr > td.warning,
    .table > thead > tr > th.warning,
    .table > tbody > tr > th.warning,
    .table > tfoot > tr > th.warning,
    .table > thead > tr.warning > td,
    .table > tbody > tr.warning > td,
    .table > tfoot > tr.warning > td,
    .table > thead > tr.warning > th,
    .table > tbody > tr.warning > th,
    .table > tfoot > tr.warning > th {
        background-color: #fcf8e3;
    }
    
    .table-hover > tbody > tr > td.warning:hover,
    .table-hover > tbody > tr > th.warning:hover,
    .table-hover > tbody > tr.warning:hover > td,
    .table-hover > tbody > tr:hover > .warning,
    .table-hover > tbody > tr.warning:hover > th {
        background-color: #faf2cc;
    }
    
    .table > thead > tr > td.danger,
    .table > tbody > tr > td.danger,
    .table > tfoot > tr > td.danger,
    .table > thead > tr > th.danger,
    .table > tbody > tr > th.danger,
    .table > tfoot > tr > th.danger,
    .table > thead > tr.danger > td,
    .table > tbody > tr.danger > td,
    .table > tfoot > tr.danger > td,
    .table > thead > tr.danger > th,
    .table > tbody > tr.danger > th,
    .table > tfoot > tr.danger > th {
        background-color: #f2dede;
    }
    
    .table-hover > tbody > tr > td.danger:hover,
    .table-hover > tbody > tr > th.danger:hover,
    .table-hover > tbody > tr.danger:hover > td,
    .table-hover > tbody > tr:hover > .danger,
    .table-hover > tbody > tr.danger:hover > th {
        background-color: #ebcccc;
    }
    
    .table-responsive {
        min-height: .01%;
        overflow-x: auto;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive {
            width: 100%;
            margin-bottom: 15px;
            overflow-y: hidden;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            border: 1px solid #ddd;
        }
        .table-responsive > .table {
            margin-bottom: 0;
        }
        .table-responsive > .table > thead > tr > th,
        .table-responsive > .table > tbody > tr > th,
        .table-responsive > .table > tfoot > tr > th,
        .table-responsive > .table > thead > tr > td,
        .table-responsive > .table > tbody > tr > td,
        .table-responsive > .table > tfoot > tr > td {
            white-space: nowrap;
        }
        .table-responsive > .table-bordered {
            border: 0;
        }
        .table-responsive > .table-bordered > thead > tr > th:first-child,
        .table-responsive > .table-bordered > tbody > tr > th:first-child,
        .table-responsive > .table-bordered > tfoot > tr > th:first-child,
        .table-responsive > .table-bordered > thead > tr > td:first-child,
        .table-responsive > .table-bordered > tbody > tr > td:first-child,
        .table-responsive > .table-bordered > tfoot > tr > td:first-child {
            border-left: 0;
        }
        .table-responsive > .table-bordered > thead > tr > th:last-child,
        .table-responsive > .table-bordered > tbody > tr > th:last-child,
        .table-responsive > .table-bordered > tfoot > tr > th:last-child,
        .table-responsive > .table-bordered > thead > tr > td:last-child,
        .table-responsive > .table-bordered > tbody > tr > td:last-child,
        .table-responsive > .table-bordered > tfoot > tr > td:last-child {
            border-right: 0;
        }
        .table-responsive > .table-bordered > tbody > tr:last-child > th,
        .table-responsive > .table-bordered > tfoot > tr:last-child > th,
        .table-responsive > .table-bordered > tbody > tr:last-child > td,
        .table-responsive > .table-bordered > tfoot > tr:last-child > td {
            border-bottom: 0;
        }
    }
    
    .xueyuan ul li {
        height: 127px;
        border-bottom: none;
        padding: 0;
    }
    
    .stagetitle {
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        background-color: #33CCCC;
        padding-bottom: 10px;
        color: #333;
    }
    .banner {
        width: 100%;
    }
    .banner img {
        display: inline-block;
        width: 100%;
        height: 411px;
    }
    
    .good-wrapper {
        display: table;
        width: 100%;
        background-color: #a9a9a9;
    }
    
    .advtop {
        font-size: 46px;
        text-align: center;
        margin-bottom: 20px;
        padding-top: 20px;
    }
    
    .htmladvantage {
        width: 250px;
        height: 180px;
        margin: 0 auto;
        background: url(/skin/images/person.png) center no-repeat #fb6707;
        border-radius: 20px;
    }
    
    .htmlpay {
        width: 250px;
        height: 180px;
        margin: 20px auto;
        background: url(/skin/images/pay.png) center no-repeat #fb6707;
        border-radius: 20px;
    }
    
    .htmlfuture {
        width: 250px;
        height: 180px;
        margin: 20px auto;
        background: url(/skin/images/future.png) center no-repeat #fb6707;
        border-radius: 20px;
    }
    
    .good-wrapper h2.adv-title {
        font-size: 24px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 22px;
        border-bottom: none;
    }
    
    .adv-img {
        width: 575px;
        height: 278px;
        margin: 20px auto;
    }
    
    .adv-img img {
        display: inline-block;
        width: 575px;
        height: 278px;
    }
    
    .futurewrapper {
        width: 850px;
        height: 300px;
        margin: 20px auto;
    }
    
    .futureimg {
        width: 490px;
        height: 300px;
    }
    
    .futureimg img {
        display: inline-block;
        width: 490px;
        height: 300px;
    }
    
    .futurecontent {
        margin-left: 505px;
        height: 258px;
        border: 1px dashed #bbb;
        padding: 20px;
    }
    
    .future-title {
        font-size: 26px;
        line-height: 30px;
        font-weight: 700px;
    }
    
    .futurecontent p {
        color: #494949;
        font-size: 16px;
        line-height: 30px;
    }
    
    .abouthtml {
        display: table;
        width: 100%;
        height: auto;
        background-color: #2b2b2b;
    }
    
    .about-top {
        font-size: 46px;
        text-align: center;
        margin-bottom: 20px;
        padding-top: 20px;
        color: #fff;
    }
    
    .about-img {
        width: 680px;
        height: 367px;
        margin: 50px auto;
    }
    
    .about-img img {
        display: inline-block;
        width: 680px;
        height: 367px;
    }
    
    .about-list {
        display: table;
        width: 710px;
        height: 68px;
        margin: 20px auto;
    }
    
    .about-list li.activebag {
        background-color: #fb6707;
    }
    
    .about-list li {
        float: left;
        width: 160px;
        height: 68px;
        margin-right: 20px;
        border-radius: 15px;
        background-color: #4788c8;
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 68px;
    }
    
    .about-list li:last-child {
        margin-right: 0px;
    }
    
    .contentwrapper {
        display: table;
        width: 710px;
        margin: 20px auto;
    }
    
    .aboutcontent {
        width: 710px;
        padding: 20px;
        color: #fff;
        vertical-align: middle;
        text-indent: 2em;
        line-height: 32px;
        border: 1px dashed #fff;
        font-size: 14px;
    }
    
    .consultbtn {
        width: 150px;
        height: 40px;
        font-size: 16px;
        color: #fff;
        line-height: 40px;
        background-color: #fb6707;
        margin: 20px auto;
        border-radius: 20px;
        text-align: center;
    }
    
    .ascendant {
        display: table;
        width: 100%;
        margin-top: 10px;
    }
    
    .ascendant-list {
        display: table;
        width: 800px;
        margin: 20px auto;
    }
    
    .ascendant-list .list-item {
        width: 240px;
        height: 220px;
        margin-right: 15px;
        text-align: center;
    }
    
    .ascendant-list .list-item:last-child {
        margin-right: 0;
    }
    
    .ascendant-icon {
        width: 100px;
        height: 100px;
        font-size: 50px;
        line-height: 100px;
        margin: 10px auto;
        border-radius: 50%;
        background-color: #03c3d0;
        color: #fff;
    }
    
    .ascendant-title {
        font-size: 23px;
        font-weight: normal;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    .time-title {
        width: 618px;
        font-size: 32px;
        height: 56px;
        line-height: 56px;
        margin: 0 auto;
        background: #272727;
        color: #fff;
        text-align: center;
        margin-top: 20px;
    }
    
    
    .distance-title {
        padding-top: 20px;
        margin-bottom: 22px;
        font-weight: 700;
        font-size: 40px;
        line-height: 66px;
        text-align: center;
    }
    
    .company-num {
        font-size: 18px;
        line-height: 32px;
        text-align: center;
    }
    
    .freeTrial {
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    .freeTrial a {
        display: inline-block;
        margin: 0 auto;
        width: 232px;
        height: 55px;
        border-bottom: 5px solid #ca5b00;
        border-radius: 10px;
        background: #f5750b;
        color: #fff;
        font-size: 22px;
        line-height: 55px;
    }
    </style>
</head>

<body>
    <!---------头部---------->
    <div class="header">
        <div class="top"> <img src="/skin/images/logo.png" class="fl"><img src="/skin/images/tel.jpg" class="fr"> </div>
        <div class="nav">
            <ul>
                <li><a href="/">网站首页</a></li>
                <li><a href='/html/xueyuan/'>软件外包</a></li>
                <li><a href='/html/kecheng/lanmu/1.html'>php培训</a></li>
                <li><a href='/html/kecheng/lanmu/2.html'>HTML5培训</a></li>
                <li><a href='/html/kecheng/lanmu/3.html'>java培训</a></li>
                <li class='hover'><a href='/html/kecheng/'>高端人才培训</a></li>
                <li><a href='/html/laoshi/'>精英师资</a></li>
                <li><a href='/html/xuanze/'>选择我们</a></li>
            </ul>
        </div>
    </div>
    <!---------banner---------->
    <div class="banner"><img src="/skin/images/banner_pic2.jpg"></div>
    <!---------主体--------->
    <div id="main" class="wrapper">
        <div class="pos">高端人才培训栏目<span class="fr">您现在的位置：<a href='http://114.215.140.182/'>主页</a> > <a href='/html/kecheng/'>高端人才培训栏目</a> > <a href='/html/kecheng/lanmu/'>高端人才培训栏目</a> ></span> </div>
        <div class="content" style="padding-top: 0;">
            <meta charset="UTF-8" />
            <div class="good-wrapper">
                <h1 class="advtop">HTML5一夫当关</h1>
                <div class="htmladvantage">
                </div>
                <h2 class="adv-title">人才缺口巨大</h2>
                <h1 class="advtop">人才缺口巨大</h1>
                <h2 class="adv-title" style="font-size: 20px;">互联网行业紧缺的职位之一！</h2>
                <div class="adv-img">
                    <img src="/skin/images/xz_pic.png">
                </div>
                <div class="htmlpay">
                </div>
                <h2 class="adv-title">薪资不断攀高</h2>
                <h1 class="advtop">薪资不断攀高</h1>
                <h2 class="adv-title">HTML5平均薪资10168元</h2>
                <div class="adv-img">
                    <img src="/skin/images/xz_pic1.png">
                </div>
                <div class="htmlfuture">
                </div>
                <h2 class="adv-title">发展潜力无限</h2>
                <h1 class="advtop">发展潜力无限</h1>
                <div class="futurewrapper">
                    <div class="futureimg fl">
                        <img src="/skin/images/xz_pic2.png">
                    </div>
                    <div class="futurecontent">
                        <h1 class="future-title">名企招聘多</h1>
                        <p>通常小公司对技术要求不高，没有专门的移动前端开发岗位需求。但在互联网大公司，对技术的要求高，岗位与职责更加细化和明确，随着互联网的发展和用户体验的更加重视，HTML5工程师的需求也越来越大，因此，HTML5工程师进的都是互联网大公司，具有很大的发展空间。</p>
                    </div>
                </div>
                <div class="freeTrial">
                    <a href="">预约免费试听</a>
                </div>
            </div>
            <div class="abouthtml">
                <h1 class="about-top">你对HTML5了解多少？</h1>
                <div class="about-img">
                    <img src="/skin/images/con2_pic.png">
                </div>
                <ul class="about-list">
                    <li class="list-item activebag" id="one1" onmouseover="setTab('one',1,4)">什么是HTML5?</li>
                    <li class="list-item" id="one2" onmouseover="setTab('one',2,4)">HTML5发展前景?</li>
                    <li class="list-item" id="one3" onmouseover="setTab('one',3,4)">HTML5可以做什么?</li>
                    <li class="list-item" id="one4" onmouseover="setTab('one',4,4)">HTML5的优势?</li>
                </ul>
                <div class="contentwrapper">
                    <p class="aboutcontent" id="con_one_1">万维网的核心语言、超文本标记语言（HTML）的第五次重大修改。HTML5 已经于2014年10月正式定稿。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML5是web时代最前沿的技术，它特有canvas标签和多种选择的游戏开发引擎，让游戏开发更便捷。如果说苹果重新发明了手机，那么HTML5则重新定义了网络。它是链接手机、平板电脑、PC以及其他移动终端的桥梁，可以更丰富地展现页面，让视频、音频、游戏以及其他元素构成一场华丽的代码盛宴。</p>
                    <p class="aboutcontent" id="con_one_2" style="display: none;">HTML5是WEB的未来，不仅在电脑端，而且在移动端也一定会得到广泛的应用。 据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。 据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。 WEB技术发展越来越迅速，HTML5的到来更是把WEB技术推向了巅峰，目前HTML5技术已经日趋成熟，HTML5的未来十分光明，值得我们去学习。</p>
                    <p class="aboutcontent" id="con_one_3" style="display: none;">除了实现之前HTML可以实现的功能外,HTML5做以下特别的事情： 1、本地存储 基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。 2、实现多媒体更加简单 利用HTML5的video和audio非常方便的在网页上添加视频和音频，不需要很复杂的代码，就能打造一款功能齐全的HTML5播放器。 3、三维图形和动画 HTML5的3D引擎却可以更方便的实现3D效果，而且更加逼真。 4、CSS3的运用 CSS3提供更多的CSS属性，可以做更丰富的渲染效果。</p>
                    <p class="aboutcontent" id="con_one_4" style="display: none;">1.一次编写，随处部署--HTML5可以在多种设备上运行，这是其他方式都无法做到的。 2.在互联网中分享--HTML5应用都有一个URL，因此它可以在互联网中被随意分享，并且在搜索时即可被找到。 3.多厂商标准，建立在协议之上--HTML5是众多公司努力的结果，没有一家厂商可以左右它的方向。 4.适用于多种环境--HTML5应用可以使用交互式设计来提供最佳体验，而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换，而无需重复安装不同的应用。</p>
                </div>
                <div class="freeTrial">
                    <a href="">预约免费试听</a>
                </div>
            </div>
            <table class="table" style="margin-top: 10px;">
                <caption class="stagetitle">
                    第一阶段：前端基本功</caption>
                <thead>
                    <tr>
                        <th>HTML+CSS</th>
                        <th>JavaScript基础</th>
                        <th>JS基本特效</th>
                        <th>JavaScript高级特性</th>
                        <th>jQuery基本使用</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            HTML进阶</td>
                        <td>JavaScript基础教程</td>
                        <td>常见特效，例如：tab，导航，整页滚动</td>
                        <td>正则表达式</td>
                        <td>选择器</td>
                    </tr>
                    <tr>
                        <td>
                            CSS进阶</td>
                        <td>JavaScript内置对象常用方法</td>
                        <td>轮播图，用JS制作幻灯片</td>
                        <td>排序算法，递归算法</td>
                        <td>DOM操作</td>
                    </tr>
                    <tr>
                        <td>
                            DIV+CSS布局</td>
                        <td>常见DOM树操作大全</td>
                        <td>弹出层，手风琴菜单</td>
                        <td>闭包，函数节流，作用域链</td>
                        <td>特效和动画</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第二阶段：HTML5和移动Web开发</caption>
                <thead>
                    <tr>
                        <th>HTML5</th>
                        <th>CSS3</th>
                        <th>Bootstrap</th>
                        <th>移动Web开发</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            HTML5表单</td>
                        <td>颜色表示法，边框，阴影</td>
                        <td>媒体查询</td>
                        <td>视口</td>
                    </tr>
                    <tr>
                        <td>
                            音频和视频</td>
                        <td>background系列属性改变</td>
                        <td>响应式网站制作</td>
                        <td>流式布局、弹性盒模型</td>
                    </tr>
                    <tr>
                        <td>离线和本地存储</td>
                        <td>transition，动画</td>
                        <td>栅格系统</td>
                        <td>rem</td>
                    </tr>
                    <tr>
                        <td>SVG</td>
                        <td>景深和透视，3D效果制作</td>
                        <td>栅格系统原理</td>
                        <td>移动终端JavaScript事件</td>
                    </tr>
                    <tr>
                        <td>Web Socket</td>
                        <td>Velocity.js框架</td>
                        <td>Bootstrap常用模板</td>
                        <td>手机中常见js效果制作</td>
                    </tr>
                    <tr>
                        <td>Canvas</td>
                        <td>元素进场、出场策略</td>
                        <td>LESS和SASS</td>
                        <td>Zepto.js</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>炫酷CSS3网页制作</td>
                        <td></td>
                        <td>手机聚划算页面，手机滚屏</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第三阶段：HTTP服务和AJAX编程</caption>
                <thead>
                    <tr>
                        <th>Web服务器基础</th>
                        <th>PHP基础</th>
                        <th>AJAX上篇</th>
                        <th>AJAX下篇</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>服务器基础知识</td>
                        <td>PHP基本语法</td>
                        <td>Ajax简介和异步的概念</td>
                        <td>JSON和JSON的解析</td>
                    </tr>
                    <tr>
                        <td>Apache服务器和其他常见Web服务器介绍</td>
                        <td>使用PHP处理简单的GET或POST请求</td>
                        <td>Ajax框架的封装</td>
                        <td>数据绑定和模板技术</td>
                    </tr>
                    <tr>
                        <td>Apache服务器搭建</td>
                        <td></td>
                        <td>XMLHttpRequest对象详细介绍、兼容性处理方法</td>
                        <td>JSONP、跨域技术</td>
                    </tr>
                    <tr>
                        <td>HTTP介绍</td>
                        <td></td>
                        <td>Ajax框架的封装</td>
                        <td>图片预读取和lazy-load技术</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Ajax中缓存问题</td>
                        <td>jQuery框架中的AjaxAPI</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>XML介绍和使用</td>
                        <td>使用Ajax实现瀑布流案例</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第四阶段：面向对象进阶</caption>
                <thead>
                    <tr>
                        <th>面向对象中级篇</th>
                        <th>面向对象三大特征</th>
                        <th>设计模式</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>从内存角度到理解JS面向对象</td>
                        <td>继承性</td>
                        <td>面向对象编程思维</td>
                    </tr>
                    <tr>
                        <td>基本类型、复杂类型</td>
                        <td>多态性</td>
                        <td>单例模式 工厂模式</td>
                    </tr>
                    <tr>
                        <td>原型链</td>
                        <td>封装性</td>
                        <td>策略模式 观察者模式</td>
                    </tr>
                    <tr>
                        <td>ES6中的面向对象</td>
                        <td>接口</td>
                        <td>模板方法模式 代理模式</td>
                    </tr>
                    <tr>
                        <td>属性读写权限，设置器，访问器</td>
                        <td></td>
                        <td>装饰者模式，适配器模式，面向切面编程</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第五阶段：封装一个属于自己的框架</caption>
                <thead>
                    <tr>
                        <th>框架封装基础</th>
                        <th>框架封装中级</th>
                        <th>框架封装高级和补充</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>事件流 冒泡 捕获</td>
                        <td>运动原理</td>
                        <td>Jquery框架雏形</td>
                    </tr>
                    <tr>
                        <td>事件对象</td>
                        <td>单物体运动框架</td>
                        <td>可扩展性</td>
                    </tr>
                    <tr>
                        <td>事件框架</td>
                        <td>多物体运动框架</td>
                        <td>模块化</td>
                    </tr>
                    <tr>
                        <td>选择框架</td>
                        <td>运动框架面向对象封装</td>
                        <td>封装属于自己的框架</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第六阶段：模块化组件化开发</caption>
                <thead>
                    <tr>
                        <th>面向组件编程</th>
                        <th>面向模块编程</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>面向组件编程的方式</td>
                        <td>AMD设计规范</td>
                    </tr>
                    <tr>
                        <td>面向组件编程的实现原理</td>
                        <td>CMD设计规范</td>
                    </tr>
                    <tr>
                        <td>面向组件编程实战</td>
                        <td>RequireJS，LoadJS</td>
                    </tr>
                    <tr>
                        <td>基于组件化思想开发网站应用程序</td>
                        <td>淘宝的SeaJS</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第七阶段：主流的流行框架</caption>
                <thead>
                    <tr>
                        <th>Web开发工作流</th>
                        <th>MVC/MVVM/MVW框架</th>
                        <th>常用库</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>GIT/SVN</td>
                        <td>Angular.js</td>
                        <td>React.js</td>
                    </tr>
                    <tr>
                        <td>Yeoman脚手架</td>
                        <td>Backbone.js</td>
                        <td>Vue.js</td>
                    </tr>
                    <tr>
                        <td>NPM/Bower依赖管理工具</td>
                        <td>Knockout/Ember</td>
                        <td>Zepto.js</td>
                    </tr>
                    <tr>
                        <td>Grunt/Gulp/Webpack</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第八阶段：HTML5原生移动应用开发</caption>
                <thead>
                    <tr>
                        <th>Cordova</th>
                        <th>Ionic</th>
                        <th>React Native</th>
                        <th>HTML5+</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>WebApp/NativeApp/HybirdApp简介</td>
                        <td>Ionic简介和同类对比</td>
                        <td>React Native简介</td>
                        <td>HTML5+中国产业联盟</td>
                    </tr>
                    <tr>
                        <td>Cordova简介、与PhoneGap之间的关系</td>
                        <td>模板项目解析</td>
                        <td>React Native环境配置</td>
                        <td>HTML5 Plus Runtime环境</td>
                    </tr>
                    <tr>
                        <td>开发环境搭建</td>
                        <td>常见组件及使用</td>
                        <td>创建项目，配置，编译，调试，部署发布</td>
                        <td>HBuilder开发工具</td>
                    </tr>
                    <tr>
                        <td>Cordova实战（创建项目，配置，编译，调试，部署发布）</td>
                        <td>结合Angular构建APP</td>
                        <td>原生模块和UI组件</td>
                        <td>MUI框架</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）</td>
                        <td>原生常用API</td>
                        <td>H5+开发和部署</td>
                    </tr>
                </tbody>
            </table>
            <table class="table">
                <caption class="stagetitle">
                    第九阶段：Node.js全栈开发</caption>
                <thead>
                    <tr>
                        <th>快速入门</th>
                        <th>核心模块和对象</th>
                        <th>Web开发基础</th>
                        <th>快速开发框架</th>
                        <th>Node.js开发电子商务实战</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Node.js发展、生态圈、Io.js</td>
                        <td>全局对象global，process，console，util</td>
                        <td>HTTP协议，请求响应处理过程</td>
                        <td>Express简介+MVC简介</td>
                        <td>需求与设计</td>
                    </tr>
                    <tr>
                        <td>Linux/Windows/OS X环境配置</td>
                        <td>事件驱动，事件发射器</td>
                        <td>关系型数据库操作和数据访问</td>
                        <td>Express常用API</td>
                        <td>账户模块注册登录</td>
                    </tr>
                    <tr>
                        <td>REPL环境和控制台程序</td>
                        <td>加密解密，路径操作，序列化和反序列化</td>
                        <td>非关系型数据库操作和数据访问</td>
                        <td>Express路由模块</td>
                        <td>会员中心模块</td>
                    </tr>
                    <tr>
                        <td>异步编程，非阻塞I/O</td>
                        <td>文件流操作</td>
                        <td>原生的Node.js开发Web应用程序</td>
                        <td>Jade/Ejs模板引擎</td>
                        <td>前台展示模块</td>
                    </tr>
                    <tr>
                        <td>模块概念，模块管理工具</td>
                        <td>HTTP服务端与客户端</td>
                        <td>Web开发工作流</td>
                        <td>使用Express重构Blog案例</td>
                        <td>购物车，订单结算</td>
                    </tr>
                    <tr>
                        <td>开发流程，调试，测试</td>
                        <td>Socket.IO</td>
                        <td>Node.js开发Blog案例</td>
                        <td>Koa等其他常见MVC框架</td>
                        <td>在线客服即时通讯模块</td>
                    </tr>
                </tbody>
            </table>
            <div class="ascendant">
                <h1 class="advtop">六大优势 超越期待</h1>
                <ul class="ascendant-list">
                    <li class="list-item fl">
                        <p class="ascendant-icon">1</p>
                        <h2 class="ascendant-title">移动互联网培训开拓者</h2>
                        <p class="ascendant-detail">专注PHP、Java、Android 、HTML5、UI等技术研发培训，坚持“用良心做教育，做真实的自己”的理念</p>
                    </li>
                    <li class="list-item fl">
                        <p class="ascendant-icon">2</p>
                        <h2 class="ascendant-title">免费试听优惠政策</h2>
                        <p class="ascendant-detail">推出“一周免费试听，不满意不缴费”的政策，让学员了解更真实的京西、了解自己是否适合做开发</p>
                    </li>
                    <li class="list-item fl">
                        <p class="ascendant-icon">3</p>
                        <h2 class="ascendant-title">毕业学员高薪就业</h2>
                        <p class="ascendant-detail">灵活的学费缴纳方式，零学费入学，工作后分期还款，业内学员毕业薪水高，培训就业协议明确标明薪资，平均薪水专科6000、本科7000、硕士8000</p>
                    </li>
                    <li class="list-item fl">
                        <p class="ascendant-icon">4</p>
                        <h2 class="ascendant-title">专业师资阵容</h2>
                        <p class="ascendant-detail">有责任心，懂教学，拥有大型项目经验实战派讲师授课，业内专家及企业技术骨干组成教研团队，准确把握企业需求</p>
                    </li>
                    <li class="list-item fl">
                        <p class="ascendant-icon">5</p>
                        <h2 class="ascendant-title">企业级项目实战训练</h2>
                        <p class="ascendant-detail">从京西软件及众多合作企业项目中研发出企业级教学项目，让学员参与真实的企业级项目研发，最终让学员获得独立设计开发自己的上线项目的能力</p>
                    </li>
                    <li class="list-item fl">
                        <p class="ascendant-icon">6</p>
                        <h2 class="ascendant-title">高薪就业服务体系</h2>
                        <p class="ascendant-detail">签订《就业培训协议》，在协议里写出明确薪水，开设就业指导课，每年名企双选会，搭建学员与企业面对面沟通平台，为学员提供更好的就业服务</p>
                    </li>
                </ul>
            </div>
            <p class="time-title">现场真课免费试听2周，体验后再报名！</p>
            <div class="freeTrial">
                <a href="">预约免费试听</a>
            </div>
            <h3 class="distance-title">足不出户挑工作，学员、企业零距离</h3>
            <p class="company-num">京西在全国各大城市长期合作企业超500多家，
                <br> 每月有超过50家名企上门招募京西优秀人才。
                <br> 一年至少12场京西名企双选会，
                <br> 有些学员未毕业就已获得高薪Offer！
            </p>
            <img src="/skin/images/qyzp_pic.jpg" style="display: inline-block;margin-left:80px;margin-top:40px" alt="企业招聘" />
        </div>
    </div>
    <!---------底部--------->
    <div class="footer">
        <div class="top">
            <div style="width:1024px;margin:0 auto;">
                <div class="list"> <img src="/skin/images/weibo.jpg" style="float:left;" width: "86px;" height="86px;">
                    <div class="txt fr">
                        <p>微博</p>
                        <p style="color:#333;">京西软件官方微博</p>
                        <br/>
                        <p><img src="/skin/images/guanzhu_06.jpg" style="float:left;margin-right:10px;">扫描关注</p>
                    </div>
                </div>
                <div class="list"> <img src="/skin/images/weixin.jpg" style="float:left;" width: "86px;" height="86px;">
                    <div class="txt fr">
                        <p>微信</p>
                        <p style="color:#333;">京西软件官方微信</p>
                        <br/>
                        <p><img src="/skin/images/guanzhu_09.jpg" style="float:left;margin-right:10px;">扫描关注</p>
                    </div>
                </div>
                <div class="list sever">
                    <p>服务热线</p>
                    <p style="font-size:25px;font-weight:bold;">07525942002</p>
                    <p>服务时间</p>
                    AM 09:00~PM 06:00 </div>
                <ul class="bottom_menu fl">
                    <a href="/html/xueyuan/">软件外包</a> <a href="/html/kecheng/lanmu/1.html">php培训</a> <a href="/html/kecheng/lanmu/2.html">HTML5培训</a> <a href="/html/kecheng/lanmu/3.html">java培训</a>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div style="width:1024px;margin:0 auto;">
                <div class="fl">地址：广东省惠州市惠城区 粤123456 </div>
                <div class="fr" style="width:540px;"> <span style="float:left;">Copyright &copy; 2014-2015 京西软件 版权所有</span> </div>
            </div>
        </div>
    </div>
</body>
<script>
function setTab(name, cursel, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var con = document.getElementById("con_" + name + "_" + i);
        menu.className = i == cursel ? "activebag" : "";
        con.style.display = i == cursel ? "block" : "none";
    }
}
</script>

</html>
